<script setup lang="ts">
import { ref } from 'vue'

// 自定义Props类型

type Props = {
  defaultValue?: string
}


const props = withDefaults(defineProps<Props>(), {
  defaultValue: 'Sample Text'
})

// 自定义事件类型(具名元祖)
const emit = defineEmits<{
  'text-change': [value: string]
}>()

const refValue = ref(props.defaultValue)

const inputChange = (e: Event) => {
  refValue.value = (e.target as HTMLInputElement).value
  emit('text-change', refValue.value)
}
</script>

<template>
  <div class="textInput-box">
    <h1 class="title">Text</h1>
    <input class="input-box" type="text" :value="refValue" @input="inputChange">
  </div>
</template>

<style lang="less" scoped>
.textInput-box {
  width: 320px;
  margin-top: 20px;

  .title {
    font-size: 20px;
    color: #64748B;
    font-weight: 700;
  }

  .input-box {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background-color: #F1F5F9;
    color: #64748B;
    font-size: 16px;
    border-radius: 12px;
    border: none;
  }
}
</style>